<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const emit = defineEmits<{
  login: [username: string]
}>();

// 视图状态控制
const isLoginMode = ref(true);

// 表单数据
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const error = ref('');
const isLoading = ref(false);
const successMessage = ref('');

// 登录处理
const handleLogin = async (event: Event) => {
  event.preventDefault();
  
  // 简单的验证逻辑
  if (!username.value || !password.value) {
    error.value = '请输入用户名和密码';
    return;
  }
  
  isLoading.value = true;
  error.value = '';
  successMessage.value = '';
  
  try {
    // 调用后端登录接口
    const response = await axios.post('http://localhost:3000/api/auth/login', {
      username: username.value,
      password: password.value
    });
    
    if (response.data.success) {
      // 保存token到localStorage
      localStorage.setItem('token', response.data.token);
      localStorage.setItem('user', JSON.stringify(response.data.user));
      
      // 触发登录成功事件
      emit('login', username.value);
      
      // 可以在这里添加页面跳转逻辑
      console.log('登录成功，用户信息:', response.data.user);
    }
  } catch (err: any) {
    if (err.response && err.response.data) {
      error.value = err.response.data.message || '登录失败';
    } else {
      error.value = '网络错误，请稍后再试';
    }
    console.error('登录错误:', err);
  } finally {
    isLoading.value = false;
  }
};

// 注册处理
const handleRegister = async (event: Event) => {
  event.preventDefault();
  
  // 验证逻辑
  if (!username.value || !password.value) {
    error.value = '请输入用户名和密码';
    return;
  }
  
  if (password.value.length < 6) {
    error.value = '密码长度至少为6位';
    return;
  }
  
  if (password.value !== confirmPassword.value) {
    error.value = '两次输入的密码不一致';
    return;
  }
  
  isLoading.value = true;
  error.value = '';
  successMessage.value = '';
  
  try {
    // 调用后端注册接口
    const response = await axios.post('http://localhost:3000/api/auth/register', {
      username: username.value,
      password: password.value
    });
    
    if (response.data.success) {
      // 注册成功，清空表单并显示成功消息
      username.value = '';
      password.value = '';
      confirmPassword.value = '';
      successMessage.value = '注册成功，请登录';
      
      // 自动切换到登录界面
      setTimeout(() => {
        toggleMode();
      }, 2000);
    }
  } catch (err: any) {
    if (err.response && err.response.data) {
      error.value = err.response.data.message || '注册失败';
    } else {
      error.value = '网络错误，请稍后再试';
    }
    console.error('注册错误:', err);
  } finally {
    isLoading.value = false;
  }
};

// 切换登录/注册模式
const toggleMode = () => {
  isLoginMode.value = !isLoginMode.value;
  error.value = '';
  successMessage.value = '';
  confirmPassword.value = '';
};
</script>

<template>
  <div class="login-container">
    <div class="login-wrapper">
      <!-- 左侧校徽区域 -->
      <div class="logo-section">
        <!-- 替换为WYE队徽图片 -->
        <img src="../wye队徽.jpg" alt="五邑大学WYE队徽" class="school-logo" />
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="login-form">
        <h1>{{ isLoginMode ? 'CTF靶场登录' : 'CTF靶场注册' }}</h1>
        
        <!-- 模式切换按钮 -->
        <p class="mode-switch">
          {{ isLoginMode ? '还没有账号？' : '已有账号？' }}
          <button type="button" class="switch-button" @click="toggleMode">
            {{ isLoginMode ? '立即注册' : '返回登录' }}
          </button>
        </p>
        
        <form @submit="isLoginMode ? handleLogin : handleRegister">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              id="username"
              v-model="username"
              type="text"
              placeholder="请输入用户名"
              required
            />
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input
              id="password"
              v-model="password"
              type="password"
              placeholder="请输入密码"
              required
            />
          </div>
          
          <!-- 注册时显示确认密码字段 -->
          <div v-if="!isLoginMode" class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              required
            />
          </div>
          
          <p v-if="error" class="error-message">{{ error }}</p>
          <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
          
          <button type="submit" class="login-button" :disabled="isLoading">
            {{ isLoginMode ? (isLoading ? '登录中...' : '登录') : (isLoading ? '注册中...' : '注册') }}
          </button>
          
          <!-- 只在登录模式下显示测试账号信息 -->
          <p v-if="isLoginMode" class="test-account">测试账号: admin / password</p>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-wrapper {
  display: flex;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 90%;
  max-width: 800px;
}

.logo-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  padding: 20px;
}

.school-logo {
  max-width: 200px;
  max-height: 200px;
}

.login-form {
  flex: 1;
  padding: 40px;
}

.login-form h1 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.login-button {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.login-button:hover:not(:disabled) {
  background-color: #45a049;
}

.login-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #f44336;
  margin-top: 10px;
  text-align: center;
}

.success-message {
  color: #4CAF50;
  margin-top: 10px;
  text-align: center;
}

.test-account {
  text-align: center;
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

.mode-switch {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
}

.switch-button {
  background: none;
  border: none;
  color: #4CAF50;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
}

.switch-button:hover {
  color: #45a049;
}
</style>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  /* 渐变背景效果 */
  background: linear-gradient(135deg, #FFC312 0%, #FFB300 50%, #FFA000 100%);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.login-wrapper {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 800px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    /* 校徽区域渐变背景 - 修改为红色渐变以匹配队徽配色 */
    background: linear-gradient(135deg, #C62828 0%, #B71C1C 50%, #D32F2F 100%);
    width: 35%;
    min-width: 250px;
  }

.school-logo {
  width: 180px;
  height: 180px;
  border-radius: 50%; /* 剪切为正圆形 */
  object-fit: cover; /* 确保图片填满圆形区域 */
  transition: transform 0.3s ease;
}

.school-logo:hover {
  transform: scale(1.05);
}

.login-form {
  padding: 3rem;
  width: 65%;
}

.login-form h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
  font-size: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 195, 18, 0.1);
}

.error-message {
  color: var(--color-error);
  margin-bottom: 1rem;
  text-align: center;
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-button:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(252, 66, 123, 0.3);
}

.test-account {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-text-light);
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
}

@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    max-width: 400px;
  }
  
  .logo-section {
    width: 100%;
    min-width: auto;
    padding: 1.5rem;
  }
  
  .school-logo {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* 剪切为正圆形 */
  object-fit: cover; /* 确保图片填满圆形区域 */
}
  
  .login-form {
    width: 100%;
    padding: 2rem;
  }
  
  .login-form h1 {
    font-size: 1.5rem;
  }
}
</style>